<template>
    <div class="work_box">
        <div class="work_top">
            <img src="../assets/image/work_bg.png" class="work_bg">
        </div>
        <div class="work_middle">
            <div class="work_date">
                <div class="date_list dd-clearfix">
                    <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value1" label="开始时间" type="date" label-float></mu-date-input>
                    <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value2" label="结束时间" type="date" label-float></mu-date-input>
                    <mu-select label="单位" class="dd-fl unit" label-float  v-model="normal.value1">
                        <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                    </mu-select>
                    <mu-button color="#0287b2" class="dd-fl search">搜索</mu-button>
                </div>
                <div class="date_table">
                    <mu-data-table stripe :columns="columns" :sort.sync="sort" :hover="false"  @sort-change="handleSortChange" :data="list.slice(0, 4)">
                        <template slot-scope="scope">
                            <td>{{scope.row.name}}</td>
                            <td class="is-right">{{scope.row.temp}}</td>
                            <td class="is-right">{{scope.row.beam}}</td>
                            <td class="is-right">{{scope.row.curtain}}</td>
                            <td class="is-right">{{scope.row.light}}</td>
                            <td class="is-right">{{scope.row.detector}}</td>
                            <td class="is-right dd-clearfix">
                                <mu-button small color="primary" class="handle_btn editbtn" style="margin-right:30px;" @click="openedit">{{scope.row.carbs.handle}}</mu-button>
                                <!--<mu-button small color="primary" class="dd-fl handle_btn" >{{scope.row.carbs.ignore}}</mu-button>-->
                            </td>
                        </template>
                    </mu-data-table>
                    <mu-dialog title="修改工作模式" width="360" :open.sync="openSimple">
                        <mu-form :model="editform">
                            <mu-form-item prop="input" label="模式名称" label-float>
                                <mu-text-field v-model="editform.workname"></mu-text-field>
                            </mu-form-item>
                            <mu-form-item prop="input" label="温度设定" label-float>
                                <mu-text-field v-model="editform.temp"></mu-text-field>
                            </mu-form-item>
                            <mu-form-item prop="input" label="光照设定" label-float>
                                <mu-text-field v-model="editform.light"></mu-text-field>
                            </mu-form-item>
                        </mu-form>
                        <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">返回</mu-button>
                        <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">保存</mu-button>
                    </mu-dialog>
                </div>
                <mu-pagination raised :total="100" class="page_btn" :page-count="5" :current.sync="current"></mu-pagination>
            </div>
        </div>
        <div class="back_footer">
            <img src="../assets/image/danger_bottom_bg.png" class="danger_bottom_bg">
            <div class="back_btn dd-fr" v-on:click="back">
                <img src="../assets/image/danger_btn.png">
                <span>返回主页</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                options: [
                    '年', '月', '日', '季度',
                ],
                normal: {
                    value1: '',
                    value2: '',
                    value3: '',
                    value4: 'Option 1',
                    value5: 'Option 2'
                },
                value1: undefined,
                value2: undefined,
                openSimple: false,
                current: 1,
                sort: {
                    name: '',
                    order: 'asc'
                },
                columns: [
                    { title: '名称', width: 105, name: 'name' },
                    { title: '温度设定', name: 'temp', width: 105, align: 'center', sortable: true },
                    { title: '光照设定', name: 'beam', width: 105, align: 'center', sortable: true },
                    { title: '窗帘设定', name: 'curtain', width: 105, align: 'center', sortable: true },
                    { title: '照明设定', name: 'light', width: 105, align: 'center', sortable: true },
                    { title: '探测器设定', name: 'detector', width: 105, align: 'center', sortable: true },
                    { title: '操作', name: 'carbs', width: 180, align: 'center', sortable: true },
                   
                ],
                list: [
                    {
                        name: '工作模式',
                        temp: 25,
                        beam: 12,
                        curtain:'联动',
                        light:'联动',
                        detector: '联动',
                        carbs: {handle:'修改',ignore:'保存'},
                    },
                    {
                        name: '会议模式',
                        temp: 25,
                        beam: 12,
                        curtain:'联动',
                        light:'联动',
                        detector: '联动',
                        carbs: {handle:'修改',ignore:'保存'},
                    },
                    {
                        name: '演示模式',
                        temp: 25,
                        beam: 12,
                        curtain:'联动',
                        light:'联动',
                        detector: '联动',
                        carbs: {handle:'修改',ignore:'保存'},
                    },
                    {
                        name: '空置模式',
                        temp: 25,
                        beam: 12,
                        curtain:'联动',
                        light:'联动',
                        detector: '联动',
                        carbs: {handle:'修改',ignore:'保存'},
                    }        
                ],
                editform:{
                    workname:'',
                    temp:'',
                    light:''
                }
            };
        },
        methods: {
            handleSortChange ({name, order}) {
                this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
            openedit () {
                this.openSimple = true;
            },
            closeSimpleDialog () {
                this.openSimple = false;
            }
        }
    };
</script>

<style lang="scss">

//主题
@import '~@/assets/style/theme/default.scss';
//样式
@import '~@/assets/style/style.scss';

</style>